<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('统计图')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="col-sm-12">
            <form id="formId">
                <input id="treeId"  name="deptId" type="hidden"/>
                <input id="categoryTreeId"  name="params[thingId]" type="hidden"/>
                <input id="thingType"  name="thingType" type="hidden"/>
                <div class="select-list">
                    <ul>
                        <li>
                            <label>行名称：</label>
                            <input readonly="readonly" required name="deptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择归属行" >
                        </li>
                        <li>
                            <label>物品目录：</label>
                            <input readonly="readonly" onclick="selectCategoryTree()" id="categoryTreeName" type="text" placeholder="请选择物品分类" >
                        </li>
                        <li>
                            <label style="width: 100px">物品名称：</label>
                            <input type="text" name="createName"/>
                        </li>
                        <li>
                            <label>物品信息：</label>
                            <input type="text" name="mohu"/>
                        </li>
                        <li>
                            <label>收支项目：</label>
                            <input readonly="readonly" onclick="selectThingTypeTree()" id="thingTypeName" type="text" placeholder="请选择收支项目" >
                        </li>

                        <li class="select-time">
                            <label>时间范围： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                   name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                   name="params[endTime]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="chongzhi()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>

    <div class="row" style="margin-top: 10px">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>总金额</h5>
                </div>
                <div class="ibox-content" style="padding: 0px">
                    <div class="echarts" id="bar-zonge" style="height: 500px"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" >
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>平均单价</h5>
                </div>
                <div class="ibox-content" style="padding: 0px">
                    <div class="echarts" id="bar-danjia" style="height: 500px"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>人均消耗</h5>
                </div>
                <div class="ibox-content" style="padding: 0px">
                    <div class="echarts" id="bar-sunhao" style="height: 500px"></div>
                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var posts = [[${posts}]]

    var zongedanwei = new Array();
    var zongeData = new Array();

    var bdanwei = new Array();
    var bdanjia = new Array();
    var bpingjun = "";

    var cdanwei = new Array();
    var csunhao = new Array();
    var cpingjun = "";

    // for(var i=0;i<40;i++){
    //     cdanwei.push("测试某个行"+i)
    //     csunhao.push(101+i)
    // }

    function zongeInit() {
        var barZongeChart = echarts.init(document.getElementById("bar-zonge"));
        var barZongeOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: zongedanwei,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        formatter: function (value) {
                            if(value.length > 8){
                                value = value.substring(0,8)
                            }
                            return value.split("").join('\n')
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
                        }
                    },
                    axisTick: {
                        show:false
                    }
                }
            ],
            series: [
                {
                    name: '总金额',
                    type: 'bar',
                    barWidth: '60%',
                    data: zongeData,
                    itemStyle:{
                        color:['#5470C6']
                    }
                }
            ]
        };
        barZongeChart.setOption(barZongeOption);
        // window.onresize = barChart.resize;
    }

    function danjiaInit() {
        var barDanjiaChart = echarts.init(document.getElementById("bar-danjia"));
        var barDanjiaOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: bdanwei,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        formatter: function (value) {
                            if(value.length > 8){
                                value = value.substring(0,8)
                            }
                            return value.split("").join('\n')
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
                        }
                    },
                    axisTick: {
                        show:false
                    }
                }
            ],
            series: [
                {
                    name: '单价',
                    type: 'bar',
                    barWidth: '60%',
                    data: bdanjia,
                    itemStyle:{
                        color:['#5470C6']
                    },
                    markLine: {
                        data: [
                            {
                                name: '平均值',
                                yAxis: bpingjun,
                                lineStyle: {
                                    type: 'solid',
                                    color: '#ff0000'
                                },
                                label: {
                                    show: true,
                                    formatter:bpingjun+ ''
                                }
                            }
                        ]
                    }
                }
            ]
        };
        barDanjiaChart.setOption(barDanjiaOption);
        // window.onresize = barChart.resize;
    }

    function sunhaoInit() {
        var barSunhaoChart = echarts.init(document.getElementById("bar-sunhao"));
        var barSunhaoOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: cdanwei,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        formatter: function (value) {
                            if(value.length > 8){
                                value = value.substring(0,8)
                            }
                            return value.split("").join('\n')
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
                        }
                    },
                    axisTick: {
                        show:false
                    }
                }
            ],
            series: [
                {
                    name: '损耗',
                    type: 'bar',
                    barWidth: '60%',
                    data: csunhao,
                    itemStyle:{
                        color:['#5470C6']
                    },
                    markLine: {
                        data: [
                            {
                                name: '平均值',
                                yAxis: cpingjun,
                                lineStyle: {
                                    type: 'solid',
                                    color: '#ff0000'
                                },
                                label: {
                                    show: true,
                                    formatter:cpingjun+ ''
                                }
                            }
                        ]
                    }
                }
            ]
        };
        barSunhaoChart.setOption(barSunhaoOption);
    }

    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "system/user/selectDeptTree/" + deptId;
        var options = {
            title: '选择行',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }
    function doSubmit(index, layero){
        var body = $.modal.getChildFrame(index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        $.modal.close(index);
        postSelectChange()
    }

    function selectCategoryTree() {
        var treeId = $("#categoryTreeId").val();
        var url = ctx + "financial/fThing/selectFThingCategoryTree/";
        var options = {
            title: '选择物品',
            width: "380",
            url: url,
            callBack: doSubmit2
        };
        $.modal.openOptions(options);
    }
    function doSubmit2(index, layero){
        var body = $.modal.getChildFrame(index);
        $("#categoryTreeId").val(body.find('#treeId').val());
        $("#categoryTreeName").val(body.find('#treeName').val());
        $.modal.close(index);
    }

    function selectThingTypeTree() {
        var treeId = $("#categoryTreeId").val();
        var url = ctx + "financial/thingType/selectThingTypeTree/";
        var options = {
            title: '选择收支项目',
            width: "380",
            url: url,
            callBack: doSubmit3
        };
        $.modal.openOptions(options);
    }
    function doSubmit3(index, layero){
        var body = $.modal.getChildFrame(index);
        // $("#thingType").val(body.find('#treeId').val());
        $("#thingType").val(body.find('#treeName').val());
        $("#thingTypeName").val(body.find('#treeName').val());
        $.modal.close(index);
    }

    function chongzhi() {
        $("#treeId").val("")
        $("#categoryTreeId").val("")
        $("#thingType").val("")
        chongzhiEcharts()
        $.form.reset()
    }

    function searchData() {
        var enterData = $("#formId").serializeArray();
        if(!$("#categoryTreeId").val()){
            $.modal.alertWarning('请选择物品目录！')
            return
        }
        chongzhiEcharts()

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "financial/tongji/enterList",
            data : enterData,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                if (data.code == web_status.SUCCESS){
                    var deptId = $("#treeId").val();
                    var postId = $("#postId").val();
                    if(data.data.tongjiList){
                        for(var d of data.data.tongjiList){
                            zongedanwei.push(d.deptName)
                            zongeData.push(d.zonge)
                        }
                    }
                    if(data.data.tongjiList){
                        if(data.data.averageDanjia){
                            bpingjun = data.data.averageDanjia
                        }
                        for(var d of data.data.tongjiList){
                            bdanwei.push(d.deptName)
                            bdanjia.push(d.averageDanjia)
                        }
                    }
                    if(data.data.outboundTongji){
                        if(data.data.averageSunhao){
                            cpingjun = data.data.averageSunhao
                        }
                        for(var d of data.data.outboundTongji){
                            cdanwei.push(d.deptName)
                            csunhao.push(d.pingjunSunhao)
                        }
                    }
                    zongeInit()
                    danjiaInit()
                    sunhaoInit()
                }
            }
        });
    }

    function chongzhiEcharts() {
        bdanwei = new Array();
        bdanjia = new Array();
        bpingjun = "";

        cdanwei = new Array();
        csunhao = new Array();
        cpingjun = "";

        zongedanwei = new Array();
        zongeData = new Array();
        zongeInit()
        danjiaInit()
        sunhaoInit()
    }



</script>
</body>
</html>